<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <img id="light" src="img/off.gif" /> <br />
  <div class="cls">传智教育</div>
  <br />
  <div class="cls">黑马程序员</div>
  <br />
  <input type="checkbox" name="hobby" /> 电影
  <input type="checkbox" name="hobby" /> 旅游
  <input type="checkbox" name="hobby" /> 游戏
  
  <br />
</body>

<script>
  //换图片
  var img1 = document.getElementById("light");
  img1.src = "img/on.gif";

  
  //获取便签
  var divArr = document.getElementsByTagName("div");
  for (var i = 0; i < divArr.length; i++) {
    divArr[i].innerHTML = divArr[i].innerHTML + "<font color='red'>veryGood </font>";
  }

  //反选
  var hobbyArr = document.getElementsByName("hobby");
  for (var i = 0; i < hobbyArr.length; i++) {
    hobbyArr[i].checked = true;
  }




  /*
      1 根据id属性值获取，返回单个Element对象
      var 变量名 = document.getElementById('id的属性值');
    
      2 根据标签名称获取，返回Element对象数组
      var 变量名 = document.getElementsByTagName('标签名');

      3 根据name属性值获取，返回Element对象数组
      var 变量名 = document.getElementsByName('name属性值');

      4 根据class属性值获取，返回Element对象数组
      var 变量名 = document.getElementsByClassName('class属性值');
   */

  // 1. 根据ID属性值获取
  // var imgObj = document.getElementById("light");
  // imgObj.src = "./img/on.gif";

  // // 2. 根据class属性值获取
  // var divArr = document.getElementsByClassName("cls");
  // console.log(divArr.length);

  // // 3. 根据name属性值获取
  // var inputArr = document.getElementsByName("hobby");
  // console.log(inputArr.length);

  // // 4. 根据标签名获取
  // var arr = document.getElementsByTagName("input");
  // for (var i = 0; i < arr.length; i++) {
  //   var ele = arr[i];
  //   console.log(ele);
  // }
</script>

</html>